<template>
	<view>
		<view class="notice">
			<scroll-view class="scroll-box z-padding-t-24 z-padding-lr-32" :scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="more">
				<view class="list z-radius-20 each-item z-flex-x-s-b z-padding-32 z-border-b" v-for="(item, index) in list" @tap="detail(item.id)">
					<view class="item-text z-margin-r-24">
						<view class="title">{{ item.title }}</view>
						<view class="z-margin-t-8 z-font-22 learn-text theme-color">{{ tool.formatTime(item.createtime) }}</view>
					</view>
					<image class="item-img z-radius-16" v-if="item.image" mode="aspectFill" :src="cdn(item.image)"></image>
				</view>
				<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				<!-- <van-empty description="暂无订单" v-if="finish && list.length === 0" /> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			list: [],
			finish: false,
			loading: false,
			page: 1
		};
	},
	onLoad(options) {
		this.reload();
	},
	methods: {
		detail(e) {
			this.util.skip('/service/noticeDetail/noticeDetail?id=' + e);
		},
		reload() {
			(this.list = []), (this.page = 1), (this.finish = false);
			this.getList();
		},
		more() {
			this.page = ++this.page;
			this.getList();
		},
		getList() {
			if (!uni.getStorageSync('token')) return;
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true;
			let data = {
				page: this.page,
				type: 0
			};
			http.get('notice/getlist', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true;
					}
					let arr = this.list.concat(res.data);
					this.list = arr;
				})
				.finally((res) => {
					this.loading = false;
				});
		}
	}
};
</script>

<style>
page {
  background-color: #EDF1F4;
}
.notice{
  height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - 90rpx);
  /* #endif */
  display: flex;
  flex-direction: column;
}
.scroll-box{
  height: 100%;
  box-sizing: border-box;
}
.list{
  margin-bottom: 24rpx;
}
.list:last-of-type{
  margin-bottom: 0;
}

.item-text {
  flex: 1;
  line-height: 48rpx;
}
.title{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  height: 90rpx;
}

.item-img {
  width: 200rpx;
  height: 150rpx;
  opacity: 1;
}
.each-item {
  background-color: #FFF;
}

.theme-color{
  color: #62CB81;
}
</style>
